<template>
	<div>
		
    <!-- <animation-bg style="z-index:1"></animation-bg> -->
		<a class="goBack" href="http://bigscreen.jywj12333.com:90/admin/index_bigScreen">数据中台</a>
		<a class="goNext" href="http://bigscreen.jywj12333.com:90/admin/bigScreen#/wj02/index">下一屏</a>
		<a class="goLast" href="http://bigscreen.jywj12333.com:90/admin/jyj-data-big-screen">上一屏</a>
		<aside class="fixed-wrapper">
			<span>{{dateTime}}</span>
			<el-dropdown @command="handleOptClick" class="dropDown-wrapper">
				<span class="el-dropdown-link">
					数据范围: {{curOpt}}<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item :command="`今日`">今日</el-dropdown-item>
					<el-dropdown-item :command="`本月`">本月</el-dropdown-item>
					<el-dropdown-item :command="`本季度`">本季度</el-dropdown-item>
					<el-dropdown-item :command="`本年`">本年</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</aside>
		<el-container style="height: 100vh;">
			<el-header height="82px" style="padding: 0">
				<router-view></router-view>
			</el-header>
			<el-main ref="reference" :style="`padding:${marTop}px 20px 20px 20px !important`">
				<el-row :gutter="15">
					<el-col :span="6">
						<!--热门岗位招聘-->
						<router-view ref="posts" name="posts" v-if="postsHeight" :height="postsHeight" :dateProp="dateProp" :style="`height:${postsHeight}px;`"></router-view>
						<!--期望薪资统计-->
						<router-view ref="salary" name="salary" v-if="salaryHeight" :height="salaryHeight" :dateProp="dateProp" :style="`height:${salaryHeight}px;margin-top:20px`"></router-view>
					</el-col>
					<el-col :span="12">
						<!--求职统计-->
						<router-view ref="resume" name="resume" v-if="resume" :dateProp="dateProp" :style="`height:${resume}px;`"></router-view>
						

						<el-row :gutter="15">
							<el-col :span="12">
								<!--新增人才来源-->
								<router-view ref="personnelResource" name="personnelResource" v-if="personnelResource" :height="personnelResource"
								 :dateProp="dateProp" :style="`height:${personnelResource}px;margin-top: 40px`"></router-view>
							</el-col>
							<el-col :span="12">
								<!--签到时间分布-->
								<router-view ref="signIn" name="signIn" v-if="signIn" :height="signIn" :dateProp="dateProp" :style="`height:${signIn}px;margin-top: 40px`"></router-view>
							</el-col>
						</el-row>
						
						<!--人才结构-->
						<router-view ref="personnelStructure" name="personnelStructure" :height="personnelStructure" :dateProp="dateProp"
						 :style="`height:${personnelStructure}px;margin-top: 15px`"></router-view>

					</el-col>
					<el-col :span="6">
						<!--求职者增长趋势-->
						<router-view ref="zzQs" name="zzQs" v-if="zzQs" :height="zzQs" :dateProp="dateProp" :style="`height:${zzQs}px;`"></router-view>
						<!--求职者环比增长-->
						<!-- <router-view ref="wordCloud" name="wordCloud" v-if="wordCloud" :height="wordCloud" :dateProp="dateProp" :style="`height:${wordCloud}px;`"></router-view> -->
						<!--求职者同比增长-->
						<!-- <router-view ref="personnelPercent" name="personnelPercent" v-if="personnelPercent" :height="personnelPercent"
						 :dateProp="dateProp" :style="`height:${personnelPercent}px;margin-top:20px;`"></router-view> -->
						<!--最新招聘企业-->
						<router-view ref="recruitEnterprise" name="recruitEnterprise" v-if="recruitEnterprise" :height="recruitEnterprise"
						 :dateProp="dateProp" :style="`height:${recruitEnterprise}px;margin-top:20px;`"></router-view>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		name: 'App',
		data() {
			return {
				// date: new Date(new Date().getTime() - 1000*3600*24),
				date: new Date(),
				curOpt: '本月',
				postsHeight: null,
				salaryHeight: null,
				wordCloud: null,
				zzQs: null,
				personnelPercent: null,
				recruitEnterprise: null,
				resume: null,
				personnelStructure: null,
				signIn: null,
				personnelResource: null,
				dateTime:this.formatDate(this.date, 'YYYY-MM-DD HH:mm:ss'),
				timer:'',
				marTop:''
			}
		},
		computed: {
			dateStr() {
				// var myDate = new Date();
				// let newDate=myDate.getHours()+':'+myDate.getMinutes()+':'+myDate.getSeconds(); 
				// setInterval(function(){
				// 	newDate=myDate.getHours()+':'+myDate.getMinutes()+':'+myDate.getSeconds(); 
				// 	console.log(newDate)
				// },1000)
				// return this.formatDate(this.date, 'YYYY-MM-DD')+' '+newDate
				return this.formatDate(this.date, 'YYYY-MM-DD HH:mm:ss')
			},
			dateProp() {
				this.pullData();
				if (this.curOpt === '本月') {
					return {
						month: this.formatDate(this.date, 'YYYY-MM')
					}
				} else if (this.curOpt === '本季度') {
					return {
						year: this.formatDate(this.date, 'YYYY'),
						quarter: this.formatDate(this.date, 'quarter')
					}
				} else if (this.curOpt === '本年') {
					return {
						year: this.formatDate(this.date, 'YYYY')
					}
				} else {
					return {
						date: this.formatDate(this.date, 'YYYY-MM-DD')
					}
				}
			},
			mainHeight: {
				get() {
					return 0
				},
				set(val) {
					this.postsHeight = val / 2 - 10
					this.salaryHeight = val / 2 - 10
					this.wordCloud = (val - 40) / 3
					this.zzQs = (val - 40) / 3-100
					this.personnelPercent = (val - 40) / 3
					this.recruitEnterprise = ((val - 40) / 3)*2+120
					this.resume = 60
					this.personnelStructure = (val - 90) * 3 / 5
					this.signIn = (val - 77 - 40-30) * 2 / 5
					this.personnelResource = (val - 77 - 40-30) * 2 / 5
					this.marTop=val/23
				}
			}
		},
		methods: {
			switchRange(range){
				console.log('gggggggggggggggggg:' + range)
				switch(range){
					case 'range=1':
						this.curOpt='今日'
						break;
					case 'range=2':
						this.curOpt='本月'
						break;
					case 'range=3':
						this.curOpt='本季度'
						break;
					case 'range=4':
						this.curOpt='本年'
						break;
				}
			},
			addzero(data){
				if(JSON.stringify(parseInt(data)).length=='1'){
					return '0'+data
				}else{
					return data
				}
			},
			handleOptClick(name) {
				console.log(name);
				this.curOpt = name;
				this.$store.commit('UPDATE_SA')
				this.$nextTick(_ => {
					this.$refs.resume.init();
					this.$refs.posts.init();
					this.$refs.personnelStructure.init();
					this.$refs.signIn.init();
					this.$refs.personnelResource.init();
					this.$refs.wordCloud.init();
					this.$refs.zzQs.init();
					this.$refs.personnelPercent.init();
					this.$refs.recruitEnterprise.init();
					this.$refs.salary.init();
				})
			},
			pullData() {
				if (this.curOpt != '今日') {
					return;
				}
				//return;
				var that = this;
				setTimeout(function() {
					// that.$refs.posts.init();
					that.$refs.salary.init();
					that.$refs.resume.init();
					that.$refs.personnelStructure.init();
					that.$refs.signIn.init();
					that.$refs.personnelResource.init();
					 that.$refs.wordCloud.init();
					 that.$refs.zzQs.init();
					that.$refs.personnelPercent.init();
					// that.$refs.recruitEnterprise.init();
					if (that.curOpt != '今日') {
						return;
					}
					that.pullData(name);
				}, 30 * 1000);
			},
		},
		mounted() {
			this.mainHeight = this.$refs.reference.$el.clientHeight - 40;
			console.log(this.mainHeight)
			this.$store.commit('UPDATE_DATE', this.formatDate(this.date, 'YYYY-MM-DD'));
			this.timer=setInterval(()=>{
				var myDate = new Date();
				let newDate=myDate.getFullYear()+'-'+this.addzero(myDate.getMonth()+1) +'-'+this.addzero(myDate.getDate())+' '+this.addzero(myDate.getHours())+':'+this.addzero(myDate.getMinutes())+':'+this.addzero(myDate.getSeconds());
				this.dateTime=newDate
			},1000)
			this.switchRange(window.location.href.split("?")[1].split("&")[0])
		},
		beforeDestroy(){
			if (this.timer) {
      		clearInterval(this.timeId);
   		 }
		}
	}
</script>
<style lang="stylus" scoped>
  .fixed-wrapper
    position fixed
    top 20px
    right 15px
    z-index 1000
    color #35ced8
  .dropDown-wrapper
    color #ffffff
  .el-main{
	  
  }
</style>
